<template>
	<div class="main-container loading"
		data-content-max
		v-resize="onResize"
		v-loading="ST_CURRENT.loading">
		<div v-show="!ST_CURRENT.loading"
			class="main-body-wrapper">
			<transition name="router-fade" mode="out-in">
				<keep-alive>
					<router-view v-if="$route.meta.keepAlive"></router-view>
				</keep-alive>
			</transition>
			<transition name="router-fade" mode="out-in">
				<router-view v-if="!$route.meta.keepAlive"></router-view>
			</transition>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import { mapMutations, mapState } from 'vuex';
	import { pageBack } from 'common/env';
	import { installVantUI, installMoment } from 'common/shim';

	import 'style/reset';
	import 'style/common';

	import cssVariables from "style/mixin.scss";
	Vue.prototype.$colors = cssVariables;

	import theme from 'muse-ui/lib/theme';
	theme.add('ict_theme', {
		primary: cssVariables.theme,
		secondary: cssVariables.secondary,
	}, 'light');
	theme.use('ict_theme');

	import 'muse-ui/lib/styles/base.less';
	import {
		AppBar,
		Avatar,
		Badge,
		Button,
		BottomSheet,
		Breadcrumbs,
		Checkbox,
		DateInput,
		Dialog,
		Divider,
		Drawer,
		ExpansionPanel,
		Form,
		FormItem,
		Menu,
		Grid,
		Helpers,
		Icon,
		List,
		LoadMore,
		Paper,
		Popover,
		Progress,
		SubHeader,
		Tabs,
		TextField,
		Tooltip,
	} from 'muse-ui';

	Vue.use(AppBar);
	Vue.use(Avatar);
	Vue.use(Badge);
	Vue.use(Button);
	Vue.use(BottomSheet);
	Vue.use(Breadcrumbs);
	Vue.use(Checkbox);
	Vue.use(DateInput);
	Vue.use(Dialog);
	Vue.use(Divider);
	Vue.use(Drawer);
	Vue.use(ExpansionPanel);
	Vue.use(Form);
	Vue.use(Menu);
	Vue.use(Grid);
	Vue.use(Helpers);
	Vue.use(Icon);
	Vue.use(List);
	Vue.use(LoadMore);
	Vue.use(Paper);
	Vue.use(Popover);
	Vue.use(Progress);
	Vue.use(SubHeader);
	Vue.use(Tabs);
	Vue.use(TextField);
	Vue.use(Tooltip);
	import 'muse-ui/lib/styles/theme.less';

	import 'muse-ui-loading/dist/muse-ui-loading.css';
	import Loading from 'muse-ui-loading';
	Vue.use(Loading);

	// import 'muse-ui-progress/dist/muse-ui-progress.css';
	// import NProgress from 'muse-ui-progress';
	// Vue.use(NProgress);

	import 'style/muse-ui-variables';

	import '@vant/touch-emulator';
	installVantUI(Vue, [
		'Cell', 'CellGroup', 'Button', 'Search', 'Form', 'Field', 'Tag',
		'Grid', 'GridItem', 'Swipe', 'SwipeItem', 'Tab', 'Tabs', 'PullRefresh',
		'Sticky', 'Empty', 'Skeleton', 'Loading', 'Circle', 'Progress', 'Image',
		'DropdownMenu', 'DropdownItem', 'Collapse', 'CollapseItem', 'NoticeBar',
		'NavBar', 'TreeSelect', 'RadioGroup', 'Radio', 'IndexBar', 'IndexAnchor',
		'ImagePreview', 'Lazyload', 'Popup', 'SwipeCell', 'Icon', 'Popover', 'Uploader',
	]);
	import 'vant/lib/index.less';
	import 'vant/lib/icon/local.css';
	import 'style/vant-ui-variables';

	import 'style/iconfont/iconfont.css';
	import 'style/icon-font-variables';
	
	// import VueBack from 'plugin/VueBack';
	// Vue.use(VueBack);

	// import VueMovable from 'plugin/VueMovable';
	// Vue.use(VueMovable);

	// import VueHighlightWords from 'plugin/VueHighlightWords';
	// Vue.use(VueHighlightWords, {
	// 	name: 'highlight',
	// 	className: 'hight-light-label',
	// 	style: 'color: red',
	// 	caseSensitive: false
	// });

	// import moment from 'moment';
	// installMoment(moment);

	import _ from 'lodash';

  	export default {
		components: {
		},
    	data() {
            return {
            };
		},
		computed: {
			...mapState(['ST_CURRENT', 'ST_DEVICE', 'ST_USER']),
		},
		watch: {
		},
		methods: {
			...mapMutations([
				'BIND_CURRENT', 'BIND_DEVICE',
				'BIND_USER'
			]),
			back() {
				pageBack();
			},
			changeDeviceType() {
				if(! window.innerWidth) {
					return;
				}
				if(window.innerWidth < 648) {
					this.BIND_DEVICE({ isMobile: true });
					return;
				}
				this.BIND_DEVICE({ isMobile: false });
			},
			/* 配合mixin中的rem+vw布局处理使用 */
			adjustBasicSize() {
				// 获取基准值
				const html = document.querySelector('html');
				const content = JSON.parse(window.getComputedStyle(html).getPropertyValue('content')); 
				if(! content) {
					return;
				}
				const config = JSON.parse(content);
				const designWidth = parseFloat(config.design);
				const maxWidth = parseFloat(config.max);
				// 超出最大值的情况下不做处理
				if(window.innerWidth > maxWidth) {
					html.style.fontSize = '';
					return;
				}
				// 计算设计稿宽度相对当前窗口宽度的比例
				// font-size按该比例缩放即可达到设计稿比例大小
				const radio = designWidth / window.innerWidth;
				// 记录初始生成的font-size, 后面都用它来计算动态值
				if(! html.$basicFontSizeVW) {
					const fontSize = window.getComputedStyle(html).getPropertyValue('font-size');
					html.$basicFontSizeVW = window.innerWidth / parseFloat(fontSize); 
				}
				// 一定要vw单位才能动态变化
				html.style.fontSize = html.$basicFontSizeVW * radio + 'vw';
			},
			onResize() {
				// 调整基准比例
				this.adjustBasicSize();
				// 检查当前屏幕宽度, 做适配
				this.changeDeviceType();
			},
			gotoRouteByArgs() {
				if(this.$route.path && this.$route.path !== '/') {
					this.$router.replace({ path: '/'});
				}
				this.$router.replace({ path: '/home'});
			},
		},
		created() {
			this.BIND_CURRENT({ loading: true });
			this.$inject.initWith(this);
			this.$$context = this.$inject.to(this, 'APP_ENTRANCE');
		},
		async mounted() {
			// 设置一些通用控制方法
			window.setUserTimeout = () => {
                this.BIND_DEVICE({isTimeout: true});
            };
			// 完成初始化，跳转路由
			this.gotoRouteByArgs();
			// 延迟一小段时间用于路由跳转或者界面类型切换显示
			_.delay(() => {
				this.BIND_CURRENT({ loading: false });
			}, 500);
		},
  	}
</script>
<style lang="scss">
	@import 'style/mixin';

	html,body {
		background: transparent !important;
    	background-color: transparent !important;
	}
	.router-fade-enter-active, .router-fade-leave-active {
	  	transition: opacity .3s;
	}
	.router-fade-enter, .router-fade-leave-active {
	  	opacity: 0;
	}
	.main-container {
		@include root-font-size();
		width: 100%;
		max-width: 100vw;
		min-height: 100vh;
		position: relative;
		margin: 0 auto;
		background: transparent;
		font-size: px2rem($fs_main);
		font-family: $font_family;
		.main-header {
			width: 100%;
			max-width: 100vw;
			height: px2rem(64px);
			&.fixed {
				position: fixed;
			}
			cite {
				font-size: px2rem(14px);
			}
		}
		.main-body-wrapper {
			width: 100%;
			max-width: 100vw;
			.main-body {
				width: 100%;
				max-width: 100vw;
				position: relative;
				&.full-height {
					height: 100%;
					min-height: 100vh;
				}
			}
		}
		.main-header.fixed~.main-body,
		.main-header.fixed~.container {
			padding-top: px2rem(72px) !important;
		}
	}
</style>